import React, { useState } from 'react';
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';
import './index.less';

export default function (props: any) {
  const [{ width, height }, setSize] = useState({
    width: 500,
    height: 500,
  });
  const onResize = (event: any, { size }: any) => {
    setSize({
      width: size.width,
      height: size.height,
    });
  };
  return (
    <div className="wrapper">
      <div className="preview">
        <div className="title">预览区域</div>
        <ResizableBox
          width={width}
          height={height}
          draggableOpts={{ grid: [25, 25] }}
          onResize={onResize}
        >
          <div className="preview-content">{props.children}</div>
        </ResizableBox>
        <div className="preview-tip">{`${width} X ${height}`}</div>
      </div>
      {/* <div className='editor'>
        <div className='title'>编辑区域</div>
      </div> */}
    </div>
  );
}
